<template>
	<view id="PaymentMethod">
		<view class="PaymentMethod">
			<view class="wx PayType">
				<image src="@/static/pay_wechat@3x.png"></image>
				<view class="content">
					微信支付
				</view>
				<view class="radio" :class="radioA=='3'?1:'radioActive'" @click="radioAll('3')"></view>
			</view>
			<view class="ye PayType">
				<image src="@/static/pay_balance1@3x.png"></image>
				<view class="content">
					余额支付
				</view>
				<view class="radio" :class="radioA=='1'?1:'radioActive'" @click="radioAll('1')"></view>
			</view>
			<view class="dj PayType">
				<image src="@/static/pay_balance2@3x.png"></image>
				<view class="content">
					冻结余额支付
				</view>
				<view class="radio" :class="radioA=='4'?1:'radioActive'" @click="radioAll('4')"></view>
			</view>
			
		</view>
		<view class="bottomcar savebottom">
						<view class="bottomcontent">
							合计：<text class="price">￥{{total}}</text>
						</view>
							<navigator url @click="jiesuan()" class="button">
								结算
							</navigator>
				</view>
	</view>
</template>

<script>
	import md5 from '@/common/api/md5.js'
	import {requestUrl} from '@/common/config.js'
	export default {
		data() {
			return {
				radioA:'3',
				total:'',
				order:'',
				access_token:'',
				order_sn:''
			};
		},
		onShow() {
			if(uni.getStorageSync('TotalPrice')){
			this.total=JSON.parse(uni.getStorageSync('TotalPrice'))
			}
			if(uni.getStorageSync('order')){
			this.order=JSON.parse(uni.getStorageSync('order'))
				
			}
			
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel()
			  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			  eventChannel.on('acceptDataFromOpenerPage', data=> {
				this.order=data
				this.total=data.order_amount
			  })
		},
		methods:{
			jiesuan(){
				let time = Math.round(new Date().getTime() / 1000).toString()
				this.access_token=JSON.parse(uni.getStorageSync('access_token'))
				let _this = this
				let Time = ['time', time].join('=')
				let TYPE = ['type', this.radioA].join('=')
				let Order = ['orders', this.order.order_sn].join('=')
				let Access_token = ['access_token', this.access_token].join('=')
				let content = ['content=pinet.FeiMao.2017'].join()
				let arr = [content,Order,TYPE,Time].sort(function(a, b) {
					a - b
				})
				let newarr = md5(arr.join('&'))
					if(this.radioA==3){
						console.log('access_token',this.access_token)
						console.log('time',time)
						// console.log('sign',newarr)
						console.log('type',this.radioA)
						console.log('orders',this.order.order_sn)
						this.$request('/app/order/payorder','post',{
							access_token: this.access_token,
							type:this.radioA,
							orders:this.order.order_sn
						}).then(res=>{
							console.log('timeStamp',res.content.timestamp.toString())
							console.log('nonceStr',res.content.noncestr)
							console.log('package',`prepay_id=${res.content.prepayid}`)
							// console.log('signType','MD5')
							// console.log('paySign',res.data.content.sign)
							console.log('provider','wxpay')
							if(res.errcode==0){
							uni.requestPayment({
							    provider: 'wxpay',
							    timeStamp: res.content.timestamp.toString(),
							    nonceStr: res.content.noncestr,
							    package: `prepay_id=${res.content.prepayid}`,
							    signType: 'MD5',
							    paySign: res.content.sign,
							    success: function (res) {
							        console.log('success:' + JSON.stringify(res));
							    },
							    fail: function (err) {
							        console.log('fail:' + JSON.stringify(err));
							    }
							});
							}
							
						})
						// uni.request({
						// 	url: requestUrl+'/app/order/payorder',
						// 	method: "GET",
						// 	data: {
						// 		access_token: this.access_token,
						// 		time: time,
						// 		sign: newarr,
						// 		type:this.radioA,
						// 		orders:this.order.order_sn
						// 	},
						// 	success: function(res) {
						// 		console.log('timeStamp',res.data.content.timestamp.toString())
						// 		console.log('nonceStr',res.data.content.noncestr)
						// 		console.log('package',`prepay_id=${res.data.content.prepayid}`)
						// 		// console.log('signType','MD5')
						// 		// console.log('paySign',res.data.content.sign)
						// 		console.log('provider','wxpay')
						// 		if(res.data.errcode==0){
						// 		uni.requestPayment({
						// 		    provider: 'wxpay',
						// 		    timeStamp: res.data.content.timestamp.toString(),
						// 		    nonceStr: res.data.content.noncestr,
						// 		    package: `prepay_id=${res.data.content.prepayid}`,
						// 		    signType: 'MD5',
						// 		    paySign: res.data.content.sign,
						// 		    success: function (res) {
						// 		        console.log('success:' + JSON.stringify(res));
						// 		    },
						// 		    fail: function (err) {
						// 		        console.log('fail:' + JSON.stringify(err));
						// 		    }
						// 		});
						// 		}
								
						// 	}
						// });
					}else if(this.radioA==1){
						console.log('access_token',this.access_token)
						console.log('time',time)
						console.log('sign',newarr)
						console.log('type',this.radioA)
						console.log('orders',this.order.order_sn)
						this.$request('/app/order/payorder','post',{
							access_token: this.access_token,
							time: time,
							sign: newarr,
							type:this.radioA,
							orders:this.order.order_sn
						}).then(res=>{
							if(res.errcode==0){
								console.log(res)
								uni.reLaunch({
								    url: '/pages/mine/mine/mine'
								});
							}
						})
						// uni.request({
						// 	url: requestUrl+'/app/order/payorder',
						// 	method: "GET",
						// 	data: {
						// 		access_token: this.access_token,
						// 		time: time,
						// 		sign: newarr,
						// 		type:this.radioA,
						// 		orders:this.order.order_sn
						// 	},
						// 	success: function(res) {
						// 		if(res.data.errcode==0){
						// 			console.log(res)
						// 			uni.reLaunch({
						// 			    url: '/pages/mine/mine/mine'
						// 			});
						// 		}
								
						// 	}
						// });
					}

			},
			radioAll(e){
				this.radioA=e
			}
		}
	}
</script>

<style lang="less" scoped>
	#PaymentMethod{
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.PaymentMethod{
		flex: 1;
		padding-top: 20rpx;
		background-color: #F3F4F5;
		.PayType{
			display: flex;
			align-items: center;
			padding: 30rpx 40rpx;
			position: relative;
			background-color: #fff;
			border-top: 1px solid #EDEDED;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.content{
				flex: 1;
				margin-left: 24rpx;
			}
			.radio{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				bottom: 35rpx;
				right: 45rpx;
				background: url(@/static/selected%20active.png) 0px 0px;
				background-size: 32rpx 32rpx;
			}
			.radioActive{
				background: url(@/static/selected／on.png) 0px 0px;
				background-size: 32rpx 32rpx;
			}
		}
	}
		.bottomcar{
		width: 95%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		background-color: #fff;
		.bottomcontent{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
			display: flex;
			align-items: center;
			.price{
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #DB1B22;
				margin: 0 10rpx;
			}
			.freight{
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
			}

		}
		.button{
			padding: 12rpx 60rpx;
			background: #DB1B22;
			border-radius: 36px;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 30rpx;
		}
	}
	.savebottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
